<template>
  <div class="files">
    <div v-for="(item,index) in fileList" :key="item" @click="selectFile(item)" class="file"
         :class="{'is-checked':selectFileId === item.id}">
      <div class="attr">
        <span>文件名称：</span>
        <el-tooltip class="item" effect="dark" :content="item.alias" placement="top">
          <span class="fileName">
            {{item.alias}}
          </span>
        </el-tooltip>
      </div>
      <div class="attr">
        <span>文件大小：</span>
        {{_rtSize(item.size)}}
      </div>
      <div class="attr">
        <span>更新时间：</span>
        {{item.updateTime | formatDate}}
      </div>
      <el-popconfirm :confirmButtonText="$t('Confirm')" :cancelButtonText="$t('Cancel')" icon="el-icon-info" iconColor="red"
                     :title="$t('Delete?')" @onConfirm="onDelete(item,index)">
        <div slot="reference" class="remove"><i class="el-icon-circle-close"></i></div>
      </el-popconfirm>
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import { bytesToSize } from '@/module/util/util'
  export default {
    props: {
      dirId: {
        type: [Number, String],
        default: -1
      },
      fileList: Array
    },
    data () {
      return {
        fileResourcesList: [],
        selectFileId: ''
      }
    },
    watch: {
      dirId () {
        // this._getList()
      }
    },
    created () {
      // this._getList()
    },
    methods: {
      ...mapActions('resource', ['getResourcesListP', 'getResourcesList', 'deleteResource']),
      _rtSize (val) {
        return bytesToSize(parseInt(val))
      },
      _getList () {
        let searchParams = {
          pageNo: 1,
          pageSize: 100,
          type: 'FILE',
          id: this.dirId || -1
        }
        this.getResourcesListP(searchParams).then(res => {
          this.fileResourcesList = res.totalList
        }).catch(e => {
        })
      },
      selectFile (file) {
        // this.selectFileId = file.id
        // this.$emit('input', file)
      },
      onDelete (item, index) {
        this.deleteResource({
          id: item.id
        }).then(res => {
          this.$emit('delete', index)
          this.$message.success(res.msg)
        }).catch(e => {
          this.$message.error(e.msg || '')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.files {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    .file {
        position: relative;
        width: 200px;
        margin: 10px 5px 0 5px;
        height: 80px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        // backdrop-filter: blur(6px);
        cursor: pointer;
        &.is-checked {
            background: linear-gradient(270deg, #33317e 0%, #5a58c5 100%);
            border-radius: 8px;
            color: #ffffff;
        }
        .attr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            line-height: 20px;
            font-weight: 600;
            white-space: nowrap;
            span {
                font-weight: 400;
                width: 90px;
            }
            .fileName {
                text-overflow: ellipsis;
                overflow: hidden;
                width: 80px;
                text-align: right;
            }
        }
        .remove {
            position: absolute;
            right: -5px;
            top: -8px;
            font-size: 20px;
            cursor: pointer;
        }
    }
}
</style>
